<template>
  <div>
 <van-nav-bar
  title="城市列表"
  left-arrow
  @click-left="onClickLeft"
  :fixed="true"
/>
<div class="box">
  <van-index-bar :index-list="indexList" :sticky="false">
  <van-index-anchor index="1" class="xx">当前城市</van-index-anchor>
  <van-cell   :title="danqian"/>
  <van-index-anchor index="2">热门城市</van-index-anchor >
  <van-cell  v-for="item in hot " :key="item.value" :title="item.label" @click="tui(item.label)" />
  <div v-for="(item,index) in citylist" :key="index">
<van-index-anchor :index="index" >{{item.letter}} </van-index-anchor >
<van-cell :title="ele.label"  v-for="(ele,index) in item.list" :key="index" @click="huhu"/>
  </div>
</van-index-bar>
</div>
  </div>
</template>

<script>
import requset from '@/utils/requset'
export default {
  name: 'VueHaowuCity',

  data () {
    return {
      indexList: [],
      hot: [],
      citylist: [],
      danqian: ''
    }
  },
  mounted () {

  },
  created () {
    this.getcity()
    this.gethot()
    this.danqian = localStorage.getItem('dan')
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async getcity () {
      const res = await requset({
        url: '/area/city',
        params: {
          level: 1
        }
      })
      const obj = {}
      res.body.map(item => {
        const length = item.short[0].toUpperCase()
        if (obj[length]) {
          return obj[length].push(item)
        } else {
          obj[length] = [item]
          return obj[length]
        }
      })
      for (const key in obj) {
        const hhh = { letter: key[0], list: obj[key] }
        this.citylist.push(hhh)
      }
      this.citylist.sort((a, b) => { return a.letter.localeCompare(b.letter) })
      // 为索引字符数组赋值
      this.indexList = []
      this.citylist.forEach(item => this.indexList.push(item.letter))
    },
    async gethot () {
      const res = await requset({
        url: '/area/hot'
      })
      this.hot = res.body
    },
    tui (val) {
      // console.log(val)
      localStorage.setItem('dan', val)
      this.danqian = val
      // eslint-disable-next-line array-callback-return
      const res = this.hot.filter((item) => {
        if (item.label === val) {
          return item
        }
      })
      // console.log(res)
      localStorage.setItem('hotlist', JSON.stringify(res))
      this.$router.push('/home/shouye')
    },
    huhu () {
      this.$toast('该城市没有房源')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {

  background-color: #21b97a;
  .van-nav-bar__left {
    .van-icon  {
      color: #fff;
    }
  }
  .van-nav-bar__title{
  color: #fff;
  }
}
/deep/ span {
  font-size: 16px;
}
/deep/ .van-index-bar__index {
  margin-top: 15px;
}
.box {
  margin-top: 20px;
}
/deep/ .van-index-anchor--sticky {
  margin-top: 30px;
}
.xx {
  margin-top: 50px;
}
</style>
